<template>
    <view>
        <template name="voice">
            <button @longpress="_long$click$voice$btn" catch:touchmove="_send$voice$move$event" catch:touchend="_send$voice$move$end$event" id="send$voice$btn" hover-class="btn-voice-press">{{ voiceObj.startStatus ? '松开 结束' : '按住 说话' }}
            </button>
            <view v-if="voiceObj.showCancelSendVoicePart"
                  :style="'width: ' + voiceObj.voicePartWidth + 'px;height: ' + voiceObj.voicePartWidth + 'px;display: flex;position: fixed;left: ' + voiceObj.voicePartPositionToLeft + 'px;bottom: ' + voiceObj.voicePartPositionToBottom + 'px;justify-content:center;align-items: center;border-radius: 20rpx;'">
                <view :style="'background-color:black;opacity:' + (voiceObj.status==='timeDown'?0.6:0) + ';width: 100%;height: 100%;border-radius: 20rpx;position: absolute'"></view>
                <image :src="'./../../image/chat/voice/' + (voiceObj.status==='start'?(voiceObj.moveToCancel?'recall':'speak'):'attention') + '.png'" style="width: 100%;height: 100%;border-radius: 20rpx" v-if="voiceObj.status!=='timeDown'"></image>
                <text style="margin-bottom:30rpx;font-size: 150rpx;text-align: center;color: white;position: relative" v-if="voiceObj.status==='timeDown'">{{ voiceObj.timeDownNum }}</text>
                <view class="voice-record-git-status-style" v-if="!voiceObj.moveToCancel&&voiceObj.status!=='short'">
                    <image
                        src=""
                        class="voice-record-git-size-style"></image>
                </view>
                <text class="voice-status-style" :style="'background-color: ' + (voiceObj.moveToCancel?'#ab1900':'transparent') + ';'">
                    {{ voiceObj.status === 'start' || voiceObj.status === 'timeDown' ? (voiceObj.moveToCancel ? '松开手指，取消发送' : '手指上滑，取消发送') : (voiceObj.status === 'short' ? '说话时间太短' : '说话时间超时') }}
                </text>
            </view>
        </template>
    </view>
</template>

<style>
@import "voice.css";
</style>